<template>
  <div>
    <el-row>
      <el-col :span="24">
        <div class="ignore-search">
          <Search></Search>
        </div>
        <div class="fixed-search">
          <div class="grid-content bg-purple-dark">
            <div id="search">
              <Search></Search>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row
      type="flex"
      class="row-bg"
      justify="space-between"
    >
      <el-col :span="3">
        <div class="ignore-navmenu">
          <NavMenu></NavMenu>
        </div>
        <div class="fixed-navmenu">
          <div class="grid-content bg-purple">
            <div id="navmenu">
              <NavMenu></NavMenu>
            </div>
          </div>
        </div>
      </el-col>
      <el-col
        :span="21"
        class="container"
      >
        <div id="videopage">
          <VideoPage></VideoPage>
        </div>
      </el-col>

    </el-row>
  </div>
</template>

<script>
import Search from "@/views/Search";
import NavMenu from "@/views/NavMenu";
import VideoPage from "@/components/VideoPage";
import Ranking from "@/views/Ranking";
export default {
  name: "home",
  components: {
    Search,
    NavMenu,
    VideoPage,
    Ranking,
  },
};
</script>

<style scoped>
.grid-content {
  border-radius: 4px;
  min-height: 50px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.row-bg {
  /* padding: 10px 0; */
  background-color: #f9fafc;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

#search {
  margin-bottom: 10px;
}

.fixed-search {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
}

.fixed-navmenu {
  position: fixed;
  width: 12.5%;
  top: 50px;
  left: 0;
  z-index: 100;
}
</style>